<template>
  <div class="container">
    <div class="app-container">
      <el-card v-loading="loading">
        <el-tree :data="departs" :props="defaultProps" :default-expand-all="true">
          <!-- #1 el-row -->
          <!-- 作用域插槽 slot-scope="obj"，接收传递给插槽的数据，obj.data 是每个节点的数据对象-->
          <!-- <el-row slot-scope="{ data }" type="flex" align="middle" style="height: 40px; width: 100%"> -->
          <!-- 或者 <template v-slot="{ data }"></template> -->
          <!-- 或者 <template v-slot:default="{ data }"></template> -->
          <!-- 或者 <template #default="{ data }"></template> -->
          <template #default="{ data }">
            <el-row type="flex" align="middle" style="height: 40px; width: 100%">
              <!-- #2 左侧内容 -->
              <el-col>
                <span>{{ data.name }}</span>
              </el-col>
              <!-- #3 右侧内容 -->
              <el-col :span="4">
                <!-- #4 el-row -->
                <el-row type="flex">
                  <!-- #5 left -->
                  <el-col>{{ data.managerName }}</el-col>
                  <!-- #6 right -->
                  <el-col>
                    <!-- #7 -->
                    <!-- 放置下拉菜单 -->
                    <el-dropdown @command="operateDepts($event, data.id)">
                      <!-- #8 标题 -->
                      <span>操作<i class="el-icon-arrow-down" /> </span>
                      <!-- #9 内容，具名插槽 -->
                      <el-dropdown-menu slot="dropdown">
                        <!-- 下拉选项 -->
                        <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                        <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                        <el-dropdown-item command="del">删除部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>
      </el-card>
      <add-dept ref="addDept" :show-dialog.sync="showDialog" :current-node-id="currentNodeId" @updateDepartment="getDepartments" />
    </div>
  </div>
</template>
<script>
import { getDepartments, delDepartments } from '@/api/departments'
import { transListToTreeData } from '@/utils'
import AddDept from './components/add-dept'
export default {
  name: 'Department',
  components: {
    AddDept
  },
  data() {
    return {
      departs: [],
      defaultProps: {
        label: 'name' // 表示显示这个属性对应的值
      },
      showDialog: false,
      currentNodeId: null,
      loading: false
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    async getDepartments() {
      this.loading = true
      const result = await getDepartments()
      this.departs = transListToTreeData(result, 0)
      this.loading = false
    },
    operateDepts(type, id) {
      if (type === 'add') {
        // 添加子部门的操作
        this.showDialog = true
        this.currentNodeId = id
      } else if (type === 'edit') {
        // 编辑部门的操作
        this.currentNodeId = id
        this.showDialog = true
        this.$nextTick(this.$refs.addDept.getDepartDetail)
      } else {
        // 删除操作
        this.$confirm('确定要删除该部门吗').then(() => {
          return delDepartments(id)
        }).then(() => {
          this.getDepartments()
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
}
</script>
